<template>
	<view class="order-list-page">
		<view class="head-bar">
			<u-tabs
				:list="tabList"
				@click="tabClick"
				:current="tabCurrent"
				lineColor="#39CCC2"
				:inactiveStyle="{ color: '#1F1F1F' }"
				:activeStyle="{ color: '#1F1F1F', fontWeight: 'bold' }"
				lineWidth="48rpx"
				lineHeight="6rpx"
			></u-tabs>
		</view>
		<view class="my-order">
			<view class="list">
				<view class="item">
					<view @click="goOrderDetails()">
						<view class="title acea-row row-between-wrapper">
							<view class="acea-row row-middle">
								<view class="acea-row row-middle">
									<image src="../../static/images/icon/shop.png" class="mall-logo"></image>
									<text>直租侠</text> 
								</view>
							</view>
							<view class="status font-color">待审核</view>
						</view>
						<view class="item-info acea-row row-between row-top">
							<view class="pictrue">
								<image src="https://kuaidi2021.oss-cn-hangzhou.aliyuncs.com/attach/2023/02/12/88fb98e41af35daa704c5d0c039c576a.jpg?x-oss-process=image/resize,h_800,w_800"></image>
							</view>
							<view class="text  row-between">
								<text class="name line2">Apple iPhone 13 Pro Max (A2644) 256GB 远峰蓝色远峰蓝色远峰蓝色远峰蓝色</text>
								<view class="choose">已选择：租完归还·后续不可买断；午夜色；512G；12个月；1件</view>
								<view class="choose mt8">预估租期：2023/05/04-2024/05/04</view>
								<text class="money"><text>共12期，总租金</text> ￥50</text>
							</view>
						</view>
					</view>
					<view class="bottom">
						<view class="left">
							<view class="time">00:30:46</view>
							<view class="tip">后自动关闭订单</view>
						</view>
						<view class="right">
							<view class="bnt toDo">立即签约并付款</view>
						</view>
					</view>
				</view>
				
				<view class="item">
					<view @click="goOrderDetails()">
						<view class="title acea-row row-between-wrapper">
							<view class="acea-row row-middle">
								<view class="acea-row row-middle">
									<image src="../../static/images/icon/shop.png" class="mall-logo"></image>
									<text>直租侠</text> 
								</view>
							</view>
							<view class="status">待归还</view>
						</view>
						<view class="item-info acea-row row-between row-top">
							<view class="pictrue">
								<image src="https://kuaidi2021.oss-cn-hangzhou.aliyuncs.com/attach/2023/02/12/88fb98e41af35daa704c5d0c039c576a.jpg?x-oss-process=image/resize,h_800,w_800"></image>
							</view>
							<view class="text  row-between">
								<text class="name line2">Apple iPhone 13 Pro Max (A2644) 256GB 远峰蓝色远峰蓝色远峰蓝色远峰蓝色</text>
								<view class="choose">已选择：租完归还·后续不可买断；午夜色；512G；12个月；1件</view>
								<view class="choose mt8">预估租期：2023/05/04-2024/05/04</view>
								<text class="money"><text>共12期，总租金</text> ￥50</text>
							</view>
						</view>
					</view>
					<view class="bottom">
						<view class="right">
							<view class="bnt cancelBnt">取消订单</view>
							<view class="bnt toDo">立即支付</view>
						</view>
					</view>
				</view>
			</view>
			<view class="loadingicon acea-row row-center-wrapper" v-if="orderList.length > 0">
				<text class="loading iconfont icon-jiazai" :hidden="loading == false"></text>
				{{ loadTitle }}
			</view>
			<view v-if="orderList.length == 0">
				<emptyPage v-if="!loading" title="暂无订单"></emptyPage>
				<view class="loadingicon acea-row row-center-wrapper">
					<text class="loading iconfont icon-jiazai" :hidden="loading == false"></text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import emptyPage from '@/components/emptyPage.vue';	export default {
		components: {
			emptyPage
		},
		data() {
			return {
				loading: false, //是否加载中
				loadend: false, //是否加载完毕
				loadTitle: '加载更多', //提示语
				tabList: [
					{name: '全部',id: 0},
					{name: '待付款',id: 1},
					{name: '待发货',id: 2},
					{name: '待收货',id: 3},
					{name: '待归还',id: 4},
					{name: '已完成',id: 5},
				],
				orderStatus: 0,
				tabCurrent: 0,
				orderList: [1,2,3,4,5], //订单数组
				page: 1,
				limit: 20,
			};
		},
		onReachBottom: function() {
			this.getOrderList();
		},
		onLoad(options) {
			let tabStatus = options.status
			if(tabStatus == 0){
				this.tabClick({id:0,index:0})
			}else if(tabStatus == 1){
				this.tabClick({id:1,index:1})
			}else if(tabStatus == 2){
				this.tabClick({id:2,index:2})
			}else if(tabStatus == 3){
				this.tabClick({id:3,index:3})
			}else if(tabStatus == 4){
				this.tabClick({id:4,index:4})
			}else if(tabStatus == 5){
				this.tabClick({id:5,index:5})
			}
		},
		methods: {
			// 获取订单列表
			getOrderList: function() {
				let that = this;
				if (that.loadend) return;
				if (that.loading) return;
				that.loading = true;
				that.loadTitle = '加载更多';
				this.orderList.push('a')
			},
			// 查看详情
			viewDetail(id){
				uni.navigateTo({
					url: "/pages/express/order-detail?order_id=" + id
				})
			},
			// 剪切
			copy: function(val) {
				let that = this;
				uni.setClipboardData({
					data: val
				});
			},
			tabClick(item) {
				this.orderStatus = item.id;
				this.tabCurrent = item.index
				this.loadend = false;
				this.page = 1;
				this.$set(this, 'orderList', []);
				this.getOrderList();
			},
			goOrderDetails(){
				uni.navigateTo({
					url: '/pages/lease/order-detail'
				})
			}
		}
	};
</script>

<style lang="scss">
	.order-list-page {
		.head-bar {
			width: 100%;
			padding: 24rpx 24rpx 8rpx 24rpx;
			background-color: #fff;
		}
		.my-order .list {
			padding: 24rpx;
			
			.item {
				background-color: #fff;
				border-radius: 16rpx;
				margin-bottom: 24rpx;
				font-size: 28rpx;
				color: #1F1F1F;
				
				.mall-logo {
					margin-right: 8rpx;
					width: 28rpx;
					height: 28rpx;
				}
				
				.title {
					height: 84rpx;
					padding: 0 30rpx;
					font-size: 28rpx;
					color: #282828;
					border-bottom: 2rpx solid #FAFAFA;
					
					.sign {
						font-size: 24rpx;
						padding: 0 7rpx;
						height: 36rpx;
						margin-right: 15rpx;
					}
					
					
					.status {
						color: #1F1F1F;
						
						&.font-color {
							color: #39CCC2 !important;
						}
					}
					
				}
				
				.item-info {
					padding: 0 30rpx;
					margin-top: 22rpx;
					
					.pictrue {
						width: 192rpx;
						height: 192rpx;
						
						image {
							width: 100%;
							height: 100%;
							border-radius: 6rpx;
						}
					}
					
					.text {
						margin-left: 24rpx;
						flex: 1;
						font-size: 28rpx;
						font-weight: bold;
						color: #333333;
						margin-top: 6rpx;
						
						.name {
							color: #282828;
							line-height: 48rpx;
						}
						
						.choose {
							margin-top: 16rpx;
							font-size: 24rpx;
							font-weight: 400;
							color: #999999;
							line-height: 40rpx;
							
							&.mt8 {
								margin-top: 8rpx;
							}
						}
						
						.money {
							display: block;
							text-align: right;
							margin-top: 18rpx;
							font-size: 32rpx;
							font-weight: bold;
							color: #F55045;
							line-height: 44rpx;
							
							text {
								margin-right: 8rpx;
								font-size: 24rpx;
								color: #1F1F1F;
								line-height: 24rpx;
							}
						}
					}
				}
				
				.bottom {
					margin-top: 32rpx;
					border-top: 2rpx solid #FAFAFA;
					padding: 24rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					
					.left {
						color: #FF271F;
						
						.time {
							font-size: 28rpx;
							font-weight: bold;
							line-height: 28rpx;
						}
						
						.tip {
							margin-top: 8rpx;
							font-size: 24rpx;
							font-weight: 400;
							line-height: 24rpx;
						}
					}
					
					.right {
						flex: 1;
						display: flex;
						justify-content: flex-end;
						
						.bnt {
							padding: 0 32rpx;
							height: 76rpx;
							background: #FFFFFF;
							border-radius: 38rpx;
							font-size: 28rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							
							&.cancelBnt {
								border: 2rpx solid #F5F5F5;
								color: #1F1F1F;
							}
							
							&.toDo {
								background: #39CCC2;
								border: 2rpx solid #39CCC2;
								color: #fff;
							}
							
							&~.bnt {
								margin-left: 17rpx;
							}
						}
					}
				}
			}
		}
	}
	
</style>